<template>
  <div class="index">
    <div class="header">
      <div class="logo"><img src="../assets/img/logo.gif" /></div>
      <div class="help" v-if="superpath == '/foreground'">
        <div class="click" @click="changeRouter('/backHome', true)">
          个人中心
        </div>
        <div class="shopping click" @click="changeRouter('/cart', true)">
          <div class="icon"></div>
          购物车
        </div>
        <div class="click" @click="changeRouter('/login')">登录</div>
        <div class="click" @click="changeRouter('/register')">注册</div>
        <div class="click" @click="changeRouter('/foreComment', true)">留言</div>
      </div>
      <div class="click" v-else @click="changeRouter('/foreground')">
        返回前台页面
      </div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="content">
      <router-view />
    </div>

    <div class="footer">
      Copyright &copy; 北大青鸟 All Rights Reserved. 京ICP证1000001号
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const store = useStore();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});
let superpath: string;

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    superpath = route.matched[1].path;
  },
  { immediate: true }
);
function changeRouter(path: string, isLogin?: boolean) {
  if (isLogin && !userInfo.value.userid) {    
    ElMessage({
      message: "请先登录",
      type: "warning",
    });
  } else {
    router.push(path);
  }
}
</script>
<style lang="less" scoped>
.index {
  font-size: 12px;
  position: relative;
}
.header {
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .logo {
    width: 86px;
  }
  .help {
    width: 260px;
    display: flex;
    justify-content: space-around;
    .shopping {
      width: 56px;
      height: 20px;
      display: flex;
      justify-content: space-between;
      .icon {
        width: 20px;
        height: 20px;
        background: url(../assets/img/bg.png) left -69px no-repeat;
      }
    }
  }
}

.left {
  height: 30px;
  background: #fc7e31;
  width: 20%;
  position: absolute;
  top: 72.5px;
}
.right {
  height: 30px;
  background: #fc7e31;
  width: 20%;
  position: absolute;
  top: 72.5px;
  left: 80%;
}

.content {
  height: 600px;
  width: 60%;
  margin: 0 auto;
}
.footer {
  min-height: 30px;
  height: calc(100vh - 1200px);
  clear: both;
  line-height: 30px;
  text-align: center;
  margin-top: 20px;
  background: #fafafa;
  color: #666;
  border-top: 1px solid #e0e0e0;
}
.click {
  cursor: pointer;
  color: #3a52a8;
  &:hover {
    color: #4091ff;
  }
}
</style>
